<template>
  <form class="add-bar" @click.prevent>
    <label>
      姓名：
      <input type="text" v-model="name">
    </label>
    <label>
      内容：
      <input type="text" v-model="content">
    </label>
    <button @click="add">提交</button>
  </form>
</template>

<script>
export default {
  props: {
    addComment: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      name: '',
      content: '',
    }
  },
  methods: {
    add () {
      // 1、检查输入的合法性
      const {name, content} = this
      if(!name || !content) {
        return 
      }
      // 2、根据输入的数据，封装成一个comment对象
      const comment = {
        name, content
      }
      // 3、添加到comments中
      this.addComment(comment)
      
      // 4、清除输入
      this.name = ''
      this.content = ''
      
    }
  }
}
</script>

<style lang="scss">
  .add-bar{
    display: inline-block;
    vertical-align: top;
  }
  label{
    display: block;
  }
</style>